<%--
  @desc: 应用查看或编辑页面
  @author: chenw
  @create: 2014-4-29 下午 15:32
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<style type="text/css">
    .pageContent label {
        width: 100px;
    }

    .pageFormContent p {
        width: 430px;
    }

    .pageContent .alt {
        color: #666;
        padding-right: 5px;
    }

    #file_icon_add, #file_plugin_add {
        height: 20px;
        width: 220px;
        background-color: #eee;
        line-height: 20px;
        float: left;
        margin-top: 20px;
    }

    .uploadify-button {
        height: 20px;
        line-height: 20px;
        width: 80px;
        border: none;
    }

    .uploadify-button-text {
        line-height: 20px;
    }

    .uploadify-queue {
        float: left;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin: 0;
        margin-top: 20px;
    }

    .uploadify-queue-item {
        margin: 0;
        height: 20px;
        padding: 0;
        margin-left: 10px;
        width: 400px;
    }

    .uploadify-queue-item .cancel {
        padding-top: 1px;
    }

    .uploadify-queue-item .cancel a {
        float: right;
        height: 16px;
        font-size: 11px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 16px;
        background-image: none;
        width: 30px;
        text-indent: 5px;
        cursor: pointer;
        text-decoration: none;
    }

    .uploadify-queue-item .fileName, .uploadify-queue-item .data {
        font-size: 11px;
        color: gray;
    }

    .uploadify-queue-item .uploadify-progress {
        margin: 0;
        margin-top: 3px;
    }

    #icon_show {
        display: inline-block;
        line-height: 20px;
        text-indent: 10px;
        color: gray;
        width: 60px;
        height: 60px;
        margin-left: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
</style>
<div class="pageContent" style="padding-top: 1px;">
    <form method="post" action="<c:url value='/sys/app/edit'/>" class="pageForm required-validate"
          onsubmit="return validateCallback(this, appEditCallback);" enctype="multipart/form-data">
        <div class="pageFormContent" layoutH="56">
            <p>
                <label>应用名称：</label> <input name="title" type="text" size="30" value="${app.title}"/>
            </p>

            <p>
                <label>发布状态：</label>
                <select name="status" class="required combox">
                    <option value="1"
                            <c:if test="${app.status eq 1}">selected="selected"</c:if> >启用
                    </option>
                    <option value="2"
                            <c:if test="${app.status eq 2}">selected="selected"</c:if> >禁用
                    </option>
                </select>
            </p>
            <p>
                <label>应用排序：</label>
                <input name="sort" value="${app.sort}" type="text" size="30" alt="请输入排序号"
                       class="textInput"/>
            </p>

            <p>
                <label>插件类型：</label>
                <select name="appType" class="required combox">
                    <option value="1"
                            <c:if test="${app.appType eq 1}">selected="selected"</c:if> >HTML
                    </option>
                    <option value="2"
                            <c:if test="${app.appType eq 2}">selected="selected"</c:if> >原生
                    </option>
                </select>
            </p>
            <p>
                <label>程序入口：</label>
                <input name="startPage" value="${app.startPage}" type="text" size="30" alt="请输入程序入口"
                       class="required textInput"/>
            </p>
            <p>
                <label>访问的权限：</label>
                <select name="power" class="required combox">
                    <option value="0"
                            <c:if test="${app.power eq 0}">selected="selected"</c:if> >无需登录注册
                    </option>
                    <option value="1"
                            <c:if test="${app.power eq 1}">selected="selected"</c:if> >需登录
                    </option>
                    <option value="2"
                            <c:if test="${app.power eq 2}">selected="selected"</c:if> >需注册
                    </option>
                </select>
            </p>

            <p style="width: 100%;height:60px;">
                <label style="margin-top:20px;">应用图标：</label>
                <input id="file_icon_add" type="file" style="display: none;"/> <img id="icon_show" src="${iconUrl}"/>
            </p>


            <p style="width: 100%;">
                <label>应用描述：</label> <textarea cols="83" rows="5" name="desc"
                                               style="width:608px;">${app.desc}</textarea>
            </p>
            <input type="hidden" name="id" value="${app.id}"/>
            <input type="hidden" id="iconId" value="${iconId}"/>
            <input type="hidden" id="iconPath" name="icon" value="${app.icon}"/>

        </div>
        <div class="formBar">
            <ul>
                <li>
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit">保存</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="button">
                        <div class="buttonContent">
                            <button type="button" class="close">取消</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $('#file_icon_add').uploadify({
            swf: '<c:url value="/resource/dwz/uploadify/scripts/uploadify.swf"/>',
            uploader: '<c:url value="/sys/app/icon/upload"/>',
            auto: true,
            fileObjName: 'appIcon',
            fileSizeLimit: '500KB',
            fileTypeDesc: '图标文件',
            fileTypeExts: '*.png',
            buttonText: '${buttonText}图标',
            removeCompleted: false,
            formData: {"iconId": $("#iconId").val()},
            height: 20,
            width: 80,
            multi: false,
            onUploadSuccess: function (file, data, response) {
                if (data && response) {
                    var respObj = JSON.parse(data).data;
                    $("#iconId").val(respObj.fileId);
                    $("#iconPath").val(respObj.path);
                    $("#icon_show").attr("src", respObj.url + "?_=" + (new Date().getTime()));
                }
            }
        });

        $('#file_plugin_add').uploadify({
            swf: '<c:url value="/resource/dwz/uploadify/scripts/uploadify.swf"/>',
            uploader: '<c:url value="/sys/app/plugin/upload"/>',
            auto: true,
            fileObjName: 'appPlugin',
            fileSizeLimit: '10240KB',
            fileTypeExts: '*.apk;*.zip',
            fileTypeDesc: 'ZIP压缩包',
            buttonText: '${buttonText}插件',
            removeCompleted: false,
            formData: {"pluginId": $("#pluginId").val()},
            height: 20,
            width: 80,
            multi: false,
            onUploadSuccess: function (file, data, response) {
                if (data && response) {
                    var respObj = JSON.parse(data).data;
                    $("#pluginId").val(respObj.fileId);
                    $("#pluginPath").val(respObj.path);
                    $("#pluginMd5").val(respObj.md5);
                }
            }
        });
    });

    function removeIcon(icon_id) {
        $.post("<c:url value='/sys/app/icon/del/'/>" + icon_id, function (resp, st, xhr) {
            if (resp) {
                var res = jQuery.parseJSON(resp);
                if (res.statusCode != 200) {//删除成功
                    alertMsg.info(res.message);
                    $("#file_icon object").show();
                } else {
                    alertMsg.info(res.msg);
                }
                $("#del_" + icon_id).remove();
            }
        });
    }
    function appEditCallback(resp) {
        if (resp && resp.succ) {
            alertMsg.info("操作成功！");
            navTab.closeCurrentTab();
            navTab.reloadFlag('page_app_list')
        } else {
            alertMsg.info(resp.msg + "!");
        }
    }
</script>
